<template>
	<!-- //搜索 -->
	<view class="  min-h-[100vh]  homeContainer">
		<u-popup :show="propShow" mode="top" @close="propShow = false">
			<view class="p-4 ">
				<text class=" font-bold ">系列选择 :</text>
				<view class=" gap-0.5 grid grid-cols-4 mt-2">
					<text
						class=" border-gray-200 border-solid flex items-center justify-center 
						 text-nowrap py-1 rounded-xl overflow-hidden"
						:class="{ activeBtn: activeindex == item.id }" 
						v-for="(item, index) in typelist" :key="index"
						style="font-size: 0.75rem;border-radius: 0.5rem;"
						@click="changeType(item.id, item.name)">{{ item.name }}</text>
				</view>
			</view>
		</u-popup>

		<!-- 顶部数据 -->
		<view class="p-3 topcon fixed top-0 z-50" style="background: #f6f6f6;width: 96%;">
			<view class="flex items-center">
				<!-- 				<view class="px-2 text-[#ffe8c9] font-black  text-xl drop-shadow-md tracking-[14rpx] italic  ">-->
				<!-- 					{{config.basic.big_title}}-->
				<!-- 				</view>-->
				<!-- 点击显示弹出层 -->
				<view class="px-2 text-white h-full p-1 mr-1 rounded-full text-white  tabs" @click="showType ">
					<!--          {{activetext}}-->系列分类
				</view>
				<up-search placeholder="输入产品名称" v-model="keyword" bgColor="#ffffff" class="bg-[#ffffff] rounded-full"
					@custom="onsearch"></up-search>

			</view>
		</view>
		<view class="pt-12">
			<!-- 轮播图 -->
			<!-- <view class="mt-2 " >
        <up-swiper circular previousMargin="30" nextMargin="30" height="140"
 					imgMode="aspectFill" :list="bannerlist" radius="10" @click="bannerClick"></up-swiper>
 			</view> -->


			<!-- 展示按钮 -->

			<u-sticky offsetTop="-2">
				<!--      -->
				<view class=" p-3" style="padding-top: 0;padding-bottom: 0;background: #f6f6f6;">

					<up-scroll-list :indicator="false">
						<view class="scroll-list__goods-item" v-for="(item, index) in subList" :key="index"
							:class="[(index === 9) && 'scroll-list__goods-item--no-margin-right']"
							@click="clickType({ subid: item.id, index: index })">
							<view class="py-2 w-12 flex  items-center  flex-col">
								<!-- 								<image class="scroll-list__goods-item__image mb-2" mode="aspectFill"-->
								<!-- 									:src="item.image??config.basic.all_goods">-->
								<!-- 								</image>-->
								<text
									class="scroll-list__goods-item__text text-nowrap rounded-2xl overflow-hidden  px-2"
									:class="{ txtactive: index == listParam.index }">
									{{ item.name }}</text>
							</view>
						</view>
					</up-scroll-list>
				</view>

			</u-sticky>
			<!-- 公告 -->
			<view class="topNotic p-3 " style="padding-top: 0;">
				<up-notice-bar class="!py-1 " v-if="config.notice" :text="config.notice" direction="column"
					bgColor="#c8effa" color="#f1720c" duration="3000" fontSize=16></up-notice-bar>
			</view>
			<!-- 产品展示 -->
			<good-list class="p-3  mt-[-2px]" v-if="CgoodList.list" :data="CgoodList.list"></good-list>

			<!-- 显示的内容 -->
		</view>
		<up-loadmore :status="status" class="pb-4" />
	</view>
	<!-- 单独的弹窗内容 -->
	<view>
		<u-popup :show="alterShow" @close="closedata" mode="center">
			<view class="min-h-[50vh] w-[600rpx] p-5 flex flex-col items-center ">
				<text class="text-3xl font-black" v-if="alterdata.title">{{ alterdata.title }}</text>
				<view class="" id='summernote' v-html="alterdata.content">
				</view>

			</view>
			<u-button type="primary" size="large" @click="closedata">{{ config.basic.btntest }}</u-button>
		</u-popup>
	</view>

</template>

<script setup>
import {
	getConfig,
	getSubList,
	goodsList,
	getTypeList,
	searchGoods,
	getAlter
} from '@/request/api.js'
import {
	onReachBottom,
	onLoad,
	onReady,
	onShow
} from '@dcloudio/uni-app';
// import { storeToRefs } from 'pinia'


import {
	onMounted,
	onUpdated,
	ref,
	reactive
} from 'vue';
//跳转其他页面
const goto = (url) => {
	window.location.href = url
}

//标题配置信息
import { useDoctitleStore } from '@/stores/index'
const doctitle = useDoctitleStore()
// 响应式数据
const keyword = ref('');
const bannerlist = ref([]);
const config = reactive({
	'banner': '',
	'basic': '',
	'notice': '',
	'noticeList': ''
})

//点击banner
const bannerClick = (index) => {
	// console.log(config.banner[index].url);
	goto(config.banner[index].url)
}
//初始化信息
onLoad(async () => {
	await initData();
})

//初始化加载信息
const initData = async () => {
	await fgetAlter()
	await getConfigD()
	await getSubD()
	await getGoodList(listParam)

}



// console.log(doctitle.title);

//获取配置信息
const getConfigD = async () => {
	let {
		banner,
		basic,
		notice,
		noticeList,
		searchGoods
	} = await getConfig()
	config.banner = banner
	let list = []
	for (let row of banner) {
		list.push(row['image'])
	}
	bannerlist.value = list
	config.basic = basic
	config.notice = notice
	config.noticeList = noticeList
	doctitle.title = basic.documenttitle

	uni.setNavigationBarTitle({
		title: doctitle.title
	})
}


//默认分类标签数据
const subList = ref('')
//获取分类标签信息
const getSubD = async () => {
	const res = await getSubList()
	// console.log('分类标签信息');
	// console.log(res);
	subList.value = res
}

const CgoodList = reactive({
	list: [],
	total: 0
})
//分页参数
const listParam = reactive({
	page: 1,
	sub_id: 0,
	type_id: 0,
	//第几个排序内容
	index: 0
})
//获取分页信息
const getGoodList = async (param) => {
	//显示加载中
	status.value = 'loading';
	const res = await goodsList(param)
	// console.log('分页信息');
	// console.log(res);
	// CgoodList.list.push()
	CgoodList.list.push(...res.list)
	CgoodList.total = res.total
	// = [...CgoodList.value,...res.list]
	if (CgoodList.list.length >= CgoodList.total) {
		status.value = 'nomore';
	}
}

// 创建响应式数据
const status = ref('loadmore');

// 定义方法
// 触底  加载更多
// 定义方法
onReachBottom(async () => {
	listParam.page++
	if (CgoodList.list.length >= CgoodList.total) {
		//已经加载完了 不在进行加
		return
	}
	await getGoodList(listParam)
})


//分类相关功能-----

//点击分类
const clickType = async ({
	subid,
	typeid,
	index
}) => {
	//修改参数
	// console.log(subid, typeid);
	if (typeof subid !== 'undefined') {
		listParam.sub_id = subid
	}
	if (typeof typeid !== 'undefined') {
		listParam.type_id = typeid
	}
	if (typeof index !== 'undefined') {
		listParam.index = index
	}
	listParam.page = 1
	//清空数据
	CgoodList.list = []
	getGoodList(listParam)
}

//
const propShow = ref(false)
const typelist = ref()
//显示所有分类
const showType = async () => {
	const res = await getTypeList()
	typelist.value = res
	propShow.value = true
}


// 点击当前分类按钮样式
const activeindex = ref(0)
// 当前产品系列文字
const activetext = ref('产品系列')
//切换分类
const changeType = (typeid, name) => {
	activeindex.value = typeid
	activetext.value = name
	propShow.value = false
	clickType({
		typeid
	})
}

//搜索相关
const onsearch = async (value) => {
	// console.log(value);
	const res = await searchGoods({
		keyWord: value
	})
	console.log(res);
	uni.navigateTo({
		url: `/pages/search/search?keyWord=${value}`
	})
}

const alterdata = reactive({
	title: '',
	content: ''
})
//获取弹窗 //处理弹窗
const fgetAlter = async () => {
	const res = await getAlter()
	// console.log(res.title);
	if (res) {
		alterdata.title = res.title
		alterdata.content = res.content
		alterShow.value = true
		// console.log($);
		// $('#summernote').summernote(res.content)
		// Vue.$(#summernote).summernote
		// $('#summernote').summernote()
		// $('#summernote').html(res.content)
	}

}
//弹窗状态
const alterShow = ref(false)
//关闭
const closedata = () => {
	alterShow.value = false
}
// onReady(()=>{
// 	console.log('页面加载完毕');
// 	console.log('123456',alterdata.content);
// 	console.log();
// })
</script>

<style lang="scss">
.homeContainer {
	background: #f6f6f6;
}

.tabs {
	margin-left: 1rem;
	margin-right: 1rem;
	background: #f1720c;
	font-size: 0.8rem;
}

:deep(.topNotic) {
	.u-notice-bar {
		@apply rounded-md;

		.u-notice__swiper {
			@apply h-6 #{!important};
		}
	}

}

.txtactive {
	font-weight: 600;
	// @apply bg-[#fffde6];
}

:deep(.topcon) {
	.u-search {
		.u-search__action {
			@apply bg-[#f1720c] h-full p-1 mr-1 rounded-full text-white #{!important};
		}
	}
}

.activeBtn {
	font-weight: 600
	//@apply bg-red-500 text-white border-none;
}

.scroll-list {
	@include flex(column);

	&__goods-item {
		display: inline-block;
		position: relative;
		padding: 0 10px;
		/* 调整左右间距 */
		// margin-right: 20rpx;

		// margin: auto;
		// margin-right: 10px;
		// width: 20%;
		&__image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 999rpx;
			overflow: hidden;
			// border: 1px solid red;
			background-color: white;
		}

		&__text {
			// width: 100%;
			// color: #f56c6c;
			// text-align: center;
			font-size: 24rpx;
			margin-top: 5rpx;
			display: flex;
			width: 100%;
			justify-content: center;
		}
	}

	&__goods-item:not(:last-child)::after {
		content: '|';
		color: #ddd;
		position: absolute;
		right: -5rpx;
		/* 调整竖线位置 */
		top: 20rpx;
	}

}
</style>
